<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search" v-if="">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-button type="primary" @click="addDevice()"> 添加设备 </el-button>
        </el-form-item>
        <el-form-item class="rigthText">
          <el-input
            v-model.trim="searchForm.keywords"
            class="ui-w320"
            placeholder="设备名称"
            @keyup.native.enter="getDevice()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="getDevice()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="devicename" label="设备名称" min-width="200" />
        <el-table-column prop="devicecode" label="设备编号" min-width="200" />
        <el-table-column prop="devicetype" label="设备类型" min-width="200" />
        <el-table-column label="操作" align="left" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="viewDate(scope.row)"> 查看 </el-button>
            <el-button type="text" size="default" @click="updateDate(scope.row)"> 取消关联 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="getDevice()"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
    </span>

  </div>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  import xzDevice from "./xzDevice.vue";
  export default {
    // 引入组件
    components: { xzDevice },
    props: {
      roomid: {
        type: String
      }
    },
    data() {
      // 这里存放数据
      return {
        xzDeviceShow:false,
        roomForm: {},
        tableLoading: false,
        pageLoading: false,
        tableData: [],
        pageObj: {
          total: 0,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        searchForm: {
          keywords: ""
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getDevice();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {
      //获取房间信息
      async getDevice() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          let params = {
            roomid: this.roomid,
            keywords: this.searchForm.keywords,
            pageNo: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          const res = await devicePage(params);
          this.tableLoading = false;
          if (res.stat === 1) {
            if (res.data.totalElements === 0 && this.pageObj.currentPage !== 0) {
              this.pageObj.currentPage = 0;
              this.$nextTick(() => {
                this.getDevice();
              });
              return;
            }
            this.tableData = res.data.content;
            this.pageObj.total = res.data.totalElements;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      //取消
      cancel() {
        this.$emit("close");
      },
      //添加设备
      addDevice(row){
        this.$router.push({
          name: "./xzDevice.vue",
          query: {
            projectName: row.row.projectName,
            witnessTaskId: row.row.projectId,
          },
        });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .witness-result {
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #fc9306;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
  .rigthText {
    padding-right: 10px;
    float: right;
    // margin-left: 460px !important;
  }
  .dialog-footer {
    text-align: right;
  }
</style>
